import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { Dialog } from '@alifd/next';
import { t } from '@lingui/macro';
import { useStore } from '@/hooks';
import ChargeForm from './ChargeForm';

const DialogChange = ({
  curCharge, setCurCharge, portsDataSource,
  dIState, chargeOnSubmit, dICurCharge,
  setDICurCharge, dIChargeOnSubmit,
  setDIState, setIdx, driver, setDIIdx,
}) => {
  const { ruleStore } = useStore();
  return (
    <Dialog
      visible={!!curCharge}
      onCancel={() => setCurCharge(false)}
      onClose={() => setCurCharge(false)}
      title={t`编辑内容`}
      style={{ ..._SIZE_DIALOG_VALUE._member_vehicle[ruleStore._device] }}
      footer={null}
    >
      <ChargeForm
        data={curCharge}
        dataSource={portsDataSource}
        driverDataSource={dIState}
        onSubmit={(r, errors) => chargeOnSubmit(r, errors)}
        onCancel={() => setCurCharge(false)}
        dICurCharge={dICurCharge}
        setDICurCharge={setDICurCharge}
        dIChargeOnSubmit={dIChargeOnSubmit}
        dIState={dIState}
        setDIState={setDIState}
        setIdx={setIdx}
        setDIIdx={setDIIdx}
        driver={driver}
      />
    </Dialog>);
};

export default observer(DialogChange);
